<template>
  <div>
    <!--1视图-->
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="text-align: left">
      <el-form-item label="岗位编码" class="font">
        <el-input v-model="formInline.roleCoding" placeholder="岗位编码" clearable></el-input>
      </el-form-item>
      <el-form-item label="岗位名称 " class="font">
        <el-input v-model="formInline.name" placeholder="岗位名称" clearable></el-input>
      </el-form-item>
      <el-form-item label="状态 " class="font">
        <el-select v-model="formInline.status" clearable placeholder="状态">
          <el-option label="正常" value="1"></el-option>
          <el-option label="异常" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="list" style="background-color: #c1a3ca;color: white" icon="el-icon-search">搜索</el-button>
        <el-button style="background-color: #aba2ce;color: white" icon="el-icon-refresh-left" @click="clean">重置</el-button>
      </el-form-item>
    </el-form>
    <!--1视图-->
    <el-table
        :data="tableData">
      <el-table-column
          fixed
          label="角色编号"
          prop="id"
          width="150">
      </el-table-column>
      <el-table-column
          label="编码"
          prop="roleCoding"
          width="180">
      </el-table-column>
      <el-table-column
          label="岗位名称"
          prop="name"
          width="180">
      </el-table-column>
      <el-table-column
          label="排序"
          prop="sort"
          width="150">
      </el-table-column>
      <el-table-column
          label="状态"
          prop="status"
          width="150">
        <template v-slot="scope">
          <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#E4C6D0FF"
              inactive-color="#9D64AAFF"
              style="display: block"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
          label="创建时间"
          prop="createDate"
          width="230">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="openUpdate(scope.row)">
            <span style="color: #a167ae;font-size: 20px">
<!--            <i class="el-icon-share"></i>-->
              角色授权
            </span>
          </el-button>
          <el-button size="small" type="text" @click="show(scope.row)">
            <span style="color: #b474c1;font-size: 20px">
            <i class="el-icon-menu"></i>
            </span>
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
        :current-page.sync="current"
        :page-size="size"
        :total="total"
        layout="total, prev, pager, next"
        @current-change="goPage">
    </el-pagination>

    <el-dialog title="角色授权" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="权限" :label-width="formLabelWidth">
          <el-tree ref="tree"
              :data="data"
              show-checkbox
              node-key="id"
              :default-checked-keys="mids"
              :props="defaultProps">
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateRoleMenu">确 定</el-button>
      </div>
    </el-dialog>

  </div>

</template>

<script>
export default {
  name: "RoleView.vue",
  data() {
    return {
      tableData: [],
      current: 1,
      size: 5,
      total: 0,
      formInline: {},
      form:{},
      dialogFormVisible:false,
      data:[],
      defaultProps: {
        label:'name'
      },
      mids:[],
      formLabelWidth:"120px"
      //2属性定义
    }
  }, methods: {
    goPage(current) {
      this.current = current;
      this.list();
    },
    list() {
      this.axios.post("userservice/role/list?current=" + this.current + "&size=" + this.size, this.formInline).then(res => {
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    },
    clean() {
      this.formInline = {};
    },
    openUpdate(row) {
      this.form = row
      this.dialogFormVisible = true
      this.getMenu()
      this.getMenuByRoleId(row.id)
    },

    getMenu() {

      this.axios.post("menuservice/menu/getMenu").then(res => {
        this.data = res.data.data
      })
    },
    updateRoleMenu() {
      let mids= this.$refs.tree.getCheckedKeys()
      console.log(mids)
      this.form.mids=mids
      this.axios.post("userservice/role/updateRoleMenu", this.form).then(res => {
          if(res.data.code==200){
            this.$message.success(res.data.msg)
            this.dialogFormVisible=false;
          }else{
            this.$message.success(res.data.msg)
          }
      })
    },
    getMenuByRoleId(id){
        this.axios.post("userservice/role/getMenuIdByRoleId?id="+id).then(res=>{
          this.mids=res.data.data
        })
    }



  }, created() {
    this.list();
    //4.钩子函数
  }
}
</script>

<style scoped>
.font{
  font-weight: bold;
}
</style>